<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2024-01-31 16:40:20
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-01-31 16:58:01
 * @FilePath: /hr_new_vue3/src/views/Management/Human/BaseSetting/IntershipSetting/IntershipEvaluation/Components/Preview/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%B
-->
<!-- 预览模板 -->
<template>
  <a-modal
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    width="80%"
    :mask-closable="false"
    title-align="center"
    unmountOnClose
    :body-style="{
      height: '500px'
    }"
  >
    <template #title> {{ data?.name }} </template>
    <div class="index-card">
      <section>
        <ConditionBox>
          <template #left>
            <div class="title">实习评价评分规则</div>
          </template>
        </ConditionBox>
        <a-divider />
        <a-table :data="rulesData" :pagination="false" stripe>
          <template #columns>
            <a-table-column title="考核节点" align="center">
              <template #cell="{ rowIndex }">
                <span v-if="rowIndex === 0">考核评价</span>
                <span v-if="rowIndex === 1">员工自评</span>
              </template>
            </a-table-column>
            <a-table-column title="考核总分" align="center">
              <template #cell="">
                {{
                  formData?.upperLimitScore ? formData?.upperLimitScore : '不限'
                }}
              </template>
            </a-table-column>
            <a-table-column title="评分计算方式" align="center">
              <template #cell="{}">
                <span v-if="formData?.scoreCalculation === 2"> 加权计算 </span>
                <span v-if="formData?.scoreCalculation === 1"> 加和计算 </span>
                <span v-if="!formData?.scoreCalculation">--</span>
              </template>
            </a-table-column>
            <a-table-column title="考核权重" align="center">
              <template #cell="{ rowIndex }">
                <span v-if="rowIndex === 0">
                  {{ formData?.organizationEvaluation }} %
                </span>
                <span v-if="rowIndex === 1">
                  <span> {{ formData.selfEvaluation }} % </span>
                </span>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </section>
      <section>
        <ConditionBox :margin-top="20" :margin-bottom="20">
          <template #left>
            <div class="title">实习评价指标</div>
          </template>
        </ConditionBox>
        <a-divider />
        <a-table :data="formData?.indexArr" :pagination="false">
          <template #columns>
            <a-table-column :width="80">
              <template #title> 序号 </template>
              <template #cell="{ rowIndex }">
                {{ rowIndex + 1 }}
              </template>
            </a-table-column>
            <a-table-column :width="200" data-index="name" title="指标名称">
            </a-table-column>
            <a-table-column :width="200" data-index="remark" title="指标描述">
            </a-table-column>
            <a-table-column
              :width="200"
              data-index=""
              title="评分标准"
              :headerCellStyle="{
                height: '30px'
              }"
            >
              <a-table-column
                :width="200"
                data-index="excellent"
                title="优秀A"
                :headerCellStyle="{
                  height: '30px'
                }"
              >
              </a-table-column>
              <a-table-column
                :width="200"
                data-index="good"
                title="良好B"
                :headerCellStyle="{
                  height: '30px'
                }"
              >
              </a-table-column>
              <a-table-column
                :width="200"
                data-index="qualified"
                title="合格C"
                :headerCellStyle="{
                  height: '30px'
                }"
              >
              </a-table-column>
              <a-table-column
                :width="200"
                data-index="range"
                title="较差D"
                :headerCellStyle="{
                  height: '30px'
                }"
              >
              </a-table-column>
              <a-table-column
                :width="200"
                data-index="wrong"
                title="差E"
                :headerCellStyle="{
                  height: '30px'
                }"
              >
              </a-table-column>
            </a-table-column>
          </template>
        </a-table>
      </section>
      <section>
        <ConditionBox :margin-top="20" :margin-bottom="20">
          <template #left>
            <div class="title">实习综合评价</div>
          </template>
        </ConditionBox>
        <a-divider />
        <a-textarea
          disabled
          placeholder="请输入评价内容"
          allow-clear
          :auto-size="{
            minRows: 4
          }"
        >
        </a-textarea>
      </section>

      <section v-for="(item, index) in formData?.customArr" :key="index">
        <ConditionBox :margin-top="20" :margin-bottom="20">
          <template #left>
            <div class="title">
              <span> {{ item.name }}</span>
            </div>
          </template>
        </ConditionBox>
        <a-divider />
        <a-textarea
          placeholder="请输入评价内容"
          disabled
          allow-clear
          :auto-size="{
            minRows: 4
          }"
        >
        </a-textarea>
      </section>
    </div>
  </a-modal>
</template>
<script setup lang="ts">
const props = defineProps<{
  visible: boolean;
  data: any;
}>();

const emits = defineEmits(['update:visible', 'contractAttachmentTemplateEmit']);

const rulesData = [{}, {}];
const formData = ref();

watch(
  () => props.visible,
  (newVal: boolean) => {
    if (newVal) {
      formData.value = props.data;
      console.log('====================================');
      console.log(formData.value);
      console.log('====================================');
    }
  }
);

const handleOk = () => {
  emits('update:visible', false);
};

const handleCancel = () => {
  emits('update:visible', false);
};
</script>
<style scoped lang="less">
.index-card {
  border-radius: 4px;

  // margin: 20px 0;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  padding: 20px;
  .title {
    font-weight: 600;
    font-size: 18px;
  }
}

.index-add,
.custom-add {
  width: calc(100% - 2px);
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border: 1px solid #eee;
}

.custom-add {
  background-color: #e5f1ff;
  margin-top: 20px;
}
</style>
